<template>
  <div class="practice-exercise-list">
    <a-card class="section-card practice-card">
      <template #title>
        <div class="practice-header">
          <span>{{ exerciseTitle }}</span>
          <div class="practice-actions">
            <a-button v-if="exercises.length > 0" type="link" @click="pushReturn()">
              <arrow-left-outlined />返回
            </a-button>
          </div>
        </div>
      </template>

      <!-- 题目导航 -->
      <div v-if="exercises.length > 0" class="exercise-nav">
        <a-steps
          :current="currentStep"
          size="small"
          type="navigation"
          @change="handleStepChange"
          class="exercise-steps"
        >
          <a-step
            v-for="(ex, index) in exercises"
            :key="index"
            :title="`第 ${index + 1} 题`"
            :status="getStepStatus(index)"
          />
        </a-steps>
      </div>

      <!-- 当前题目内容 -->
      <div class="current-exercise">
        <div v-if="currentExercise" class="exercise-content">
          <div class="question-header">
            <h2 class="question-title">{{ currentExercise.title }}</h2>
            <div class="question-meta">
              <a-tag :color="getTypeColor(currentExercise?.type || '选择题')">{{ currentExercise.type }}</a-tag>
              <span class="question-number">{{ currentStep + 1 }} / {{ exercises.length }}</span>
            </div>
          </div>

          <div v-html="currentExercise.content" class="question-description"></div>

          <!-- 答题区域 -->
          <div class="answer-section">
            <!-- 选择题 -->
            <a-radio-group
              v-if="currentExercise.type === '选择题'"
              :value="currentAnswer"
              @change="handleAnswerChange"
              class="option-group"
            >
              <div v-for="option in currentExercise.options" :key="option" class="option-wrapper">
                <a-radio :value="option" class="option-item">
                  {{ option }}
                </a-radio>
              </div>
            </a-radio-group>

            <!-- 填空题 -->
            <a-textarea
              v-if="currentExercise.type === '填空题'"
              :value="currentAnswer"
              @change="handleAnswerChange"
              placeholder="请输入你的答案..."
              :rows="4"
              class="answer-textarea"
              show-count
              :maxlength="500"
            />

            <!-- 判断题 -->
            <a-radio-group
              v-if="currentExercise.type === '判断题'"
              :value="currentAnswer"
              @change="handleAnswerChange"
              class="judgment-group"
            >
              <div class="judgment-options">
                <a-radio value="正确" class="judgment-item">
                  <check-circle-outlined class="judgment-icon correct" />
                  正确
                </a-radio>
                <a-radio value="错误" class="judgment-item">
                  <close-circle-outlined class="judgment-icon incorrect" />
                  错误
                </a-radio>
              </div>
            </a-radio-group>

            <!-- 简答题 -->
            <a-textarea
              v-if="currentExercise.type === '简答题'"
              :value="currentAnswer"
              @change="handleAnswerChange"
              placeholder="请详细回答问题..."
              :rows="6"
              class="answer-textarea"
              show-count
              :maxlength="1000"
            />

            <!-- 综合题 -->
            <a-textarea
              v-if="currentExercise.type === '综合题'"
              :value="currentAnswer"
              @change="handleAnswerChange"
              placeholder="请综合分析并回答..."
              :rows="8"
              class="answer-textarea"
              show-count
              :maxlength="2000"
            />

            <!-- 程序题 -->
            <div v-if="currentExercise.type === '程序题'" class="program-question">
              <div class="program-info">
                <code-outlined class="program-icon" />
                <div class="program-text">
                  <h4>编程题目</h4>
                  <p>点击下方按钮进入编程环境完成题目</p>
                </div>
              </div>
              <a-button
                type="primary"
                size="large"
                @click="goProgramming(currentExercise)"
                class="program-btn"
              >
                <code-outlined />
                进入编程环境
              </a-button>
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="question-actions">
            <div class="action-left">
              <a-button v-if="currentStep > 0" @click="handlePrevQuestion" class="nav-btn">
                <arrow-left-outlined />
                上一题
              </a-button>
            </div>

            <div class="action-right">
              <a-button
                v-if="currentStep < exercises.length - 1"
                type="primary"
                @click="handleNextQuestion"
                class="nav-btn primary"
              >
                下一题
                <arrow-right-outlined />
              </a-button>
              <a-button
                v-else
                type="primary"
                @click="handleSubmitPractice"
                class="submit-btn"
                :loading="submitting"
              >
                <check-outlined />
                提交答案
              </a-button>
            </div>
          </div>
        </div>

        <a-empty v-else description="暂无练习题目" class="empty-state">
          <template #image>
            <file-text-outlined style="font-size: 64px; color: #d9d9d9" />
          </template>
        </a-empty>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import {
  ArrowLeftOutlined,
  ArrowRightOutlined,
  CheckOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
  CodeOutlined,
  FileTextOutlined,
} from '@ant-design/icons-vue'


interface Props {
  exercises: API.ExercisesVO[]
  submitting?: boolean
  exerciseTitle:string
}
interface Emits {
  (e: 'submitPractice', answers: Record<string, string>): void
}

const props = withDefaults(defineProps<Props>(), {
  submitting: false,
})

const emit = defineEmits<Emits>()

// 内部状态管理
const currentStep = ref(0)
const userAnswers = ref<Record<string, string>>({})

// 当前题目
const currentExercise = computed(() => {
  return props.exercises[currentStep.value] || null
})
const pushReturn = ()=>{

}

const goProgramming = (currentExercise:API.ExercisesVO) =>{

}
// 当前答案
const currentAnswer = computed({
  get: () => userAnswers.value[currentExercise.value?.id || ''] || '',
  set: (value: string) => {
    if (currentExercise.value) {
      userAnswers.value[String(currentExercise.value.id)] = value
    }
  },
})

// 获取题目类型颜色
const getQuestionTypeColor = (type: string) => {
  const colorMap: Record<string, string> = {
    选择题: 'blue',
    填空题: 'green',
    判断题: 'orange',
    简答题: 'purple',
    综合题: 'red',
    程序题: 'cyan',
  }
  return colorMap[type] || 'default'
}

// 获取类型颜色
const getTypeColor = (type: string) => {
  return getQuestionTypeColor(type)
}

// 获取步骤状态
const getStepStatus = (index: number) => {
  if (index < currentStep.value) return 'finish'
  if (index === currentStep.value) return 'process'
  return 'wait'
}

// 处理步骤变化
const handleStepChange = (step: number) => {
  currentStep.value = step
}

// 处理上一题
const handlePrevQuestion = () => {
  if (currentStep.value > 0) {
    currentStep.value--
  }
}

// 处理下一题
const handleNextQuestion = () => {
  if (currentStep.value < props.exercises.length - 1) {
    currentStep.value++
  }
}

// 处理提交
const handleSubmitPractice = () => {
  emit('submitPractice', userAnswers.value)
}

// 处理答案变化
const handleAnswerChange = (e: any) => {
  const value = e.target ? e.target.value : e
  currentAnswer.value = value
}
</script>

<style scoped>
.practice-exercise-list {
  width: 100%;
}

.practice-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: none;
}

.practice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.practice-header span {
  font-size: 18px;
  font-weight: 600;
  color: #1f1f1f;
}

.practice-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.exercise-nav {
  margin-bottom: 24px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.exercise-steps :deep(.ant-steps-item-title) {
  font-size: 13px;
  font-weight: 500;
}

.current-exercise {
  min-height: 400px;
}

.exercise-content {
  padding: 0;
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.question-title {
  font-size: 20px;
  font-weight: 600;
  color: #1f1f1f;
  margin: 0;
  flex: 1;
}

.question-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.question-number {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.question-description {
  margin-bottom: 24px;
  line-height: 1.6;
  color: #333;
}

.answer-section {
  margin-bottom: 32px;
}

.option-group {
  width: 100%;
}

.option-wrapper {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.option-wrapper:hover {
  border-color: #4096ff;
  background: #f8f9ff;
}

.option-item {
  width: 100%;
  font-size: 14px;
}

.judgment-group {
  width: 100%;
}

.judgment-options {
  display: flex;
  gap: 24px;
  justify-content: center;
}

.judgment-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  border: 2px solid #f0f0f0;
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
}

.judgment-item:hover {
  border-color: #4096ff;
  background: #f8f9ff;
}

.judgment-icon {
  font-size: 20px;
}

.judgment-icon.correct {
  color: #52c41a;
}

.judgment-icon.incorrect {
  color: #ff4d4f;
}

.answer-textarea {
  border-radius: 8px;
  font-size: 14px;
}

.program-question {
  text-align: center;
  padding: 32px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 2px dashed #d9d9d9;
}

.program-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}

.program-icon {
  font-size: 32px;
  color: #4096ff;
}

.program-text h4 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #1f1f1f;
}

.program-text p {
  margin: 0;
  color: #666;
}

.program-btn {
  height: 48px;
  padding: 0 32px;
  font-size: 16px;
  border-radius: 8px;
}

.question-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
}

.action-left,
.action-right {
  display: flex;
  gap: 12px;
}

.nav-btn {
  height: 40px;
  padding: 0 20px;
  border-radius: 8px;
  font-weight: 500;
}

.nav-btn.primary {
  background: #4096ff;
  border-color: #4096ff;
}

.submit-btn {
  height: 40px;
  padding: 0 24px;
  border-radius: 8px;
  font-weight: 600;
  background: #52c41a;
  border-color: #52c41a;
}

.submit-btn:hover {
  background: #73d13d;
  border-color: #73d13d;
}

.empty-state {
  padding: 64px 0;
}
</style>
